<template>
	<view class="connn">
		<u-navbar title="登录" @rightClick="rightClick" :autoBack="true"> </u-navbar>
		<view class="avatarUrl">
			<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="avatarUrl" class="refreshIcon"
					style="width: 82px;height: 82px;border-radius: 50px;filter: blur(15);margin-top: 60rpx;border: 1px solid #b5b5b5;">
				</image>
			</button>
		</view>
		<view class="nickname" style="display: flex;flex-direction: row;margin-top: 20rpx;">
			<text class="weui-text">昵称：</text>
			<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
				@input="bindinput" style="text-indent: 0em;display: block;" />
		</view>


		<button type="primary" @click="login()" style="width:710rpx;margin-top: 80rpx;">
			保存
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickName: ''
			}
		},
		onLoad() {
			const user = uni.getStorageSync("loginUser")
			if (user !== null && user !== '' && user !== 'undefined') {
				this.nickName=user.userName
				this.avatarUrl=user.userPic
			}
		},
		methods: {
			rightClick() {
				uni.navigateBack()
				console.log('rightClick');
			},
			leftClick() {
				uni.navigateBack()
				console.log('leftClick');
			},
			//昵称输入框blur
			bindblur(e) {
				this.nickName = e.detail.value;
			},
			//昵称输入框input
			bindinput(e) {
				this.nickName = e.detail.value;
			},
			//选择头像
			onChooseavatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
			},
			login() {
				var that = this
				uni.login({
					provider: 'weixin',
					success(res) {
						that.save(res)
					}
				})
			},
			//保存头像和昵称
			save(res) {
				//判断输入数据
				if (this.nickName.length < 2) {
					uni.showToast({
						title: "昵称最少两个字",
						icon: "error",
					})
					return false;
				}

				if (this.avatarUrl ==
					'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
				) {
					uni.showToast({
						title: "请选择头像",
						icon: "error",
					})
					return false;
				}

				//保存到线上
				uni.showLoading({
					title: '加载中'
				});
				var that=this
				uni.uploadFile({
					url: that.$baseurl+'/font/auth/save',
					filePath: this.avatarUrl,
					name: 'file',
					formData: {
						nickname: this.nickName,
						code: res.code
					},
					header: {},
					success: res => {
						// 注意：这里返回的res.data类型是string  需要自己去转换为JSON
						let data = JSON.parse(res.data);
						if (data.code == 200) {
							uni.setStorageSync("loginUser", data.data)
							uni.switchTab({
								url: "/pages/member/member?pic=" + data.data.userPrc
							})
							uni.showToast({
								title: '登录成功',
								icon: "none"
							})

						}
					},
					fail: (error) => {
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.connn {
		margin-top: 180rpx;
		background-color: #f1f1f1;
	}

	.weui-input {
		text-indent: 0em;
		border: 1px solid gray;
		border-radius: 10rpx;
		height: 66rpx;
		font-size: 13px;
		width: 540rpx;
		margin-left: 10rpx;
	}

	.weui-text {
		height: 66rpx;
		font-size: 40rpx;
		line-height: 66rpx;
		margin-left: 20rpx;
	}
</style>